<template>
  <div>
    <el-tabs v-model="index" :tab-position="tabPosition">
      <el-tab-pane label="基本信息" name="first" :disabled="index !== 'first'">
        <BaseForm v-if="index === 'first'" :id="editId" ref="baseForm">
          <div style="float:right">
            <el-button size="mini" @click="next('baseForm',true,'first')">暂存</el-button>
            <el-button size="mini" @click="next('baseForm',false,'second')">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </div>
        </BaseForm>
      </el-tab-pane>
      <el-tab-pane label="服务工作量总结" name="second" :disabled="index !== 'second'">
        <ServiceSummaryForm v-if="index === 'second'" :id="editId" ref="summaryForm">
          <div style="float:right">
            <el-button size="mini" @click="next('summaryForm',true,'second')">暂存</el-button>
            <el-button size="mini" icon="el-icon-arrow-left" @click="index = 'first'">上一步</el-button>
            <el-button size="mini" @click="next('summaryForm',false,'third')">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </div>
        </ServiceSummaryForm>
      </el-tab-pane>
      <el-tab-pane label="未完成项解释" name="third" :disabled="index !== 'third'">
        <UnComplete v-if="index === 'third'" :id="editId" ref="unComplete">
          <div style="float:right">
            <el-button size="mini" @click="next('unComplete',true,'third')">暂存</el-button>
            <el-button size="mini" icon="el-icon-arrow-left" @click="index = 'second'">上一步</el-button>
            <el-button size="mini" @click="next('unComplete',false,'fourth')">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </div>
        </UnComplete>
      </el-tab-pane>
      <el-tab-pane label="服务扩展" name="fourth" :disabled="index !== 'fourth'">
        <ValueAddedForm v-if="index === 'fourth'" :id="editId" ref="valueAddedForm">
          <div style="float:right">
            <el-button size="mini" icon="el-icon-arrow-left" @click="index = 'third'">上一步</el-button>
            <el-button size="mini" @click="next('valueAddedForm',true,'fourth')">保存</el-button>
          </div>
        </ValueAddedForm>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseForm from './baseForm'
import ServiceSummaryForm from './serviceSummaryForm'
import UnComplete from './unComplete.vue'
import ValueAddedForm from './valueAddedForm.vue'

export default {
  name: 'MonthWeeklyEditForm',
  components: {
    BaseForm,
    ServiceSummaryForm,
    UnComplete,
    ValueAddedForm
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      tabPosition: 'top',
      index: 'first',
      editId: -1
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.editId = this.id
    },
    immediate: true
  },
  created() {
    this.editId = this.id
    this.index = 'first'
  },
  methods: {
    next(key, showMsg = true, index) {
      this.$refs[key].save().then(response => {
        if (response === false) return
        if (showMsg) {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          })
        }
        if (key === 'baseForm') {
          this.editId = response.data.id
        }
        this.index = index

        if (key === 'valueAddedForm') {
          this.$parent.$parent.cancel()
        }
      })
    }
  }
}
</script>
